<template>
	<view class="xilu-page">
		<!-- 顶部标题栏 -->
		<view class="xilu-upload-title-bar">
			<view class="title">多次课程包订单详情</view>
		</view>

		<!-- 订单状态 -->
		<view class="xilu-card order-status-bar">
			<view class="status-title">
				<!-- <text :class="orderStatusClass">{{ orderStatusText }}</text> -->
				<text class="order-no">订单号：{{ info.order_no }}</text>
			</view>
			<view class="status-time">下单时间：{{ info.pay_time }}</view>
		</view>

		<!-- 课程/次课包信息 -->
		<view class="xilu-card flex-box">
			<image :src="info.wrap.xilufitness_urls.wrap_image" class="wrap-img" />
			<view class="flex-grow-1 pl20">
				<view class="fs32 fw500 col3 lh46">{{ info.wrap_name }}</view>
				<view class="mt10 fs26 col9 lh36">{{ info.title }}</view>
				<view class="mt10 fs26 col9 lh36">包含课程：{{ info.course.title }}</view>
				<view class="mt10 fs26 col9 lh36">剩余次数：<text class="col2">{{ info.wrap.wrap_count - info.code_num }}</text>
				</view>
			</view>
		</view>

		<!-- 教练/场馆信息 -->
		<view class="xilu-card flex-box">
			<view class="flex-grow-1">
				<view class="fs28 col9">教练：<text class="col3">{{ info.coach.coach_name }}</text></view>
				<view class="fs28 col9">手机号：<text class="col3">{{ info.coach.coach_mobile }}</text></view>
				<view class="fs28 col9 mt10">门店：<text class="col3">{{ info.shop.shop_name }}</text></view>
			</view>
			<image :src="shopImgUrl" class="shop-img ml20" v-if="shopImgUrl" />
		</view>

		<!-- 价格信息 -->
		<view class="xilu-card">
			<!-- <view class="flex-between">
				<view class="col9 fs28">原价：</view>
				<view class="col9 fs28 line-through">￥{{ info.market_price }}</view>
			</view> -->
			<view class="flex-between mt10">
				<view class="col9 fs28">实付：</view>
				<view class="col2 fs32 fw600">￥{{ info.pay_amount }}</view>
			</view>
		</view>

		<!-- 详情内容 富文本 -->
		<!-- 	<view class="xilu-card mt20">
			<view class="card-title">次课包介绍</view>
			<view class="course-content" v-html="info.content"></view>
		</view> -->

		<!-- 操作按钮 -->
		<view class="btn-area">
			<!-- <button class="main-btn" v-if="info.show_cancel==1 && info.order_status==1"
				@tap="cancelOrder(info.id)">取消订单</button> -->
			<button class="main-btn" v-if="status == 1" @tap="goPayCourse(info.work_course_id,1,info)">去使用</button>
			<button class="main-btn" v-if="status == 2" @tap="course_detail(info.work_course_id,1)">已用完</button><!--toVerify(info.course.id)-->
		</view>
	</view>
</template>

<script>
	export default {
		props: {},
		data() {
			return {
				info: {}, // 你的接口数据
				shopImgUrl: '', // 场馆图片
				shop_id: '',
				status: 0
			}
		},
		computed: {
			orderStatusText() {
				switch (this.info.order_status) {
					case 1:
						return '待使用';
					case 2:
						return '使用中';
					case 3:
						return '已用完';
					default:
						return '未知状态';
				}
			},
			orderStatusClass() {
				switch (this.info.order_status) {
					case 1:
						return 'col2';
					case 2:
						return 'col9';
					case 3:
						return 'col3';
					default:
						return '';
				}
			}
		},
		onLoad(options) {
			this.shop_id = options.id
			this.getDetail()
		},
		methods: {
			toVerify(id) {
				console.log(id);
				this.$api.navigate("../course_classification/course_classification")
			},
			//课程详情
			course_detail(id, is_type) {
				this.$api.navigate('../group_lessons_info/group_lessons_info?id=' + id + '&is_type=' + is_type)
			},
			goPayCourse(id, is_type,params){
				// 假设你要传递的JSON对象为dataObj
				let dataObj = { id: params.id, pay_body: params.pay_body,code_num: params.code_num,wrap_count:params.wrap_count };
				uni.setStorage({
				  key: 'packageinfo',
				  data: dataObj,
				  success: function() { console.log('存储成功'); },
				  fail: function(err) { console.log('存储失败', err); }
				});
				
				// // 将JSON对象转换为查询字符串
				// let queryString = JSON.stringify(dataObj);
				// // 使用encodeURIComponent确保特殊字符被正确编码
				// queryString = encodeURIComponent(queryString);
				this.$api.navigate('../pay_order/pay_order?id=' + id + '&is_type=' + is_type+ '&pay_type=5')
			},
			getDetail() {
				let _this = this
				this.$http({
					url: "/addons/xilufitness/wrap_order/getDetail",
					data: {
						id: this.shop_id
					},
					method: 'get'
				}).then(res => {
					_this.info = res.data.info
					let code_num = res.data.info.code_num
					let wrap_count = res.data.info.wrap.wrap_count
					if (code_num == wrap_count) {
						_this.status = 2
					} else {
						_this.status = 1
					}
					console.log(res);
				})
			},
			fullUrl(path) {
				if (!path) return '';
				if (path.startsWith('http')) return path;
				// 你全局图片前缀
				return (this.info.web_url || '') + path;
			},
			cancelOrder(id) {
				// 取消订单逻辑
				this.$api.modal('温馨提示', '确定取消该订单吗？', (res) => {
					if (res.confirm) {
						// 请求取消
					}
				});
			},
			
		},
		mounted() {
			// 假设props或页面onLoad里赋值info
			// this.info = ...;
			// 场馆图片
			// this.shopImgUrl = ...
		}
	}
</script>

<style lang="scss" scoped>
	.xilu-page {
		min-height: 100vh;
		background: #E8EEFE;
		padding-bottom: 40rpx;
	}

	.xilu-upload-title-bar {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-weight: 600;
		color: #ffd700;
		letter-spacing: 2rpx;
		margin-bottom: 10rpx;
	}

	.xilu-card {
		background: #fff;
		border-radius: 20rpx;
		margin: 26rpx 22rpx 0 22rpx;
		padding: 24rpx 26rpx 30rpx 26rpx;
		box-sizing: border-box;
	}

	.order-status-bar {
		.status-title {
			display: flex;
			align-items: center;
			margin-bottom: 8rpx;

			.col2 {
				color: #ffd700;
				font-size: 32rpx;
				font-weight: 600;
			}

			.col9 {
				color: #fff;
			}

			.col3 {
				color: #ff4444;
			}

			.order-no {
				font-size: 22rpx;
				color: #888;
				// margin-left: 18rpx;
			}
		}

		.status-time {
			font-size: 24rpx;
			color: #888;
		}
	}

	.flex-box {
		display: flex;
	}

	.flex-between {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flex-grow-1 {
		flex: 1;
	}

	.pl20 {
		padding-left: 20rpx;
	}

	.ml20 {
		margin-left: 20rpx;
	}

	.mt10 {
		margin-top: 10rpx;
	}

	.mt20 {
		margin-top: 20rpx;
	}

	.fs32 {
		font-size: 32rpx;
	}

	.fs28 {
		font-size: 28rpx;
	}

	.fs26 {
		font-size: 26rpx;
	}

	.fw500 {
		font-weight: 500;
	}

	.lh46 {
		line-height: 46rpx;
	}

	.colf {
		color: #fff;
	}

	.col2 {
		color: #ffd700;
	}

	.col9 {
		color: #999;
	}

	.col3 {
		color: #ff4444;
	}

	.line-through {
		text-decoration: line-through;
	}

	.wrap-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 14rpx;
		object-fit: cover;
		background: #232325;
	}

	.shop-img {
		width: 120rpx;
		height: 80rpx;
		border-radius: 14rpx;
		object-fit: cover;
		background: #232325;
	}

	.card-title {
		font-size: 28rpx;
		color: #ffd700;
		font-weight: 600;
		margin-bottom: 16rpx;
	}

	.course-content {
		font-size: 26rpx;
		color: #fff;
		line-height: 1.7;
		word-break: break-all;
	}

	.btn-area {
		margin: 38rpx 22rpx 0 22rpx;
	}

	.main-btn {
		background: #ffd700;
		color: #222223;
		font-size: 30rpx;
		font-weight: 600;
		border-radius: 12rpx;
		height: 84rpx;
		line-height: 84rpx;
		box-shadow: 0 2rpx 10rpx rgba(255, 215, 0, 0.06);
		margin: 0 0 24rpx 0;
	}
</style>